.loading-wrap{
    position: absolute;
    display: flex;
    display: -webkit-flex;
    margin:-50px 0 0 -100px;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items: center;
    top:50%;
    left:50%;
    min-height:100px;
    max-width: 200px;
}
.loading-wrap li{
    margin:0 5px;
    width:30px;
    height:40px;
}
.loading-wrap li:first-child{
    background: #f00;
    -webkit-animation:load 1s infinite;
    -o-animation:load 1s infinite;
    animation:load 1s infinite;
}
.loading-wrap li:nth-child(2){
    background: #0f0;
    -webkit-animation:load 1s infinite;
    -o-animation:load 1s infinite;
    animation:load 1s infinite;
    animation-delay: 0.2s;
}
.loading-wrap li:last-child{
    background: #00f;
    -webkit-animation:load 1s infinite;
    -o-animation:load 1s infinite;
    animation:load 1s infinite;
    animation-delay: 0.4s;
}

@keyframes load {
    0%{
        height:40px;
    }
    50%{
        height:80px;
    }
    100%{
        height:40px;
    }
}